<template>
  <div>
    <el-card class="box-card" v-if="!isShowTree">
      <el-form inline>
        <el-form-item>
          <el-input placeholder="用户名" v-model="input" />
        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="searchKeyword"
          >查询</el-button
        >
        <el-button type="default" @click="clear">清空</el-button>
      </el-form>
      <div style="margin-bottom: 20px">
        <el-button type="primary" @click="dialogVisible = true"
          >添 加</el-button
        >
        <el-button type="danger" @click="batchDelete">批量删除</el-button>
      </div>
      <el-table
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :data="roleList"
        border
      >
        <el-table-column type="selection" width="38"> </el-table-column>
        <el-table-column label="序号" width="79" type="index">
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
          fit
          #default="{ row }"
        >
          <el-input
            v-if="row.isIpt"
            v-model="roleName"
            size="mini"
            clearable
            @change=""
          ></el-input>
          <span v-else>{{ row.roleName }}</span>
        </el-table-column>
        <el-table-column prop="" label="操作" width="281" #default="{ row }">
          <el-button
            type="info"
            size="mini"
            icon="el-icon-warning"
            @click="editAssign(row)"
          ></el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-check"
            @click="saveRoleName(row)"
          ></el-button>
          <el-button
            v-if="!row.isIpt"
            type="primary"
            size="mini"
            icon="el-icon-edit-outline"
            @click="editRoleName(row)"
          >
          </el-button>
          <el-button v-else type="primary" size="mini" @click="cancelRole(row)">
            取消
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeRole(row)"
          ></el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 10px"
        @size-change="setSize"
        @current-change="setCurrent"
        :current-page="current"
        :page-sizes="[3, 6, 9]"
        :page-size="pageSize"
        layout="prev, pager,next, jumper,->, sizes,total "
        :total="total"
      >
      </el-pagination>
      <el-dialog title="添加角色" :visible.sync="dialogVisible" width="30%">
        <div style="margin-bottom: 10px"><span>请输入新名称</span></div>
        <el-input v-model="addUserName" size="mini"></el-input>

        <span slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false"
            >取 消</el-button
          >
          <el-button size="mini" type="primary" @click="addRole"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
    <TreeModel :isShowTree="isShowTree" ref="treeModel"></TreeModel>
  </div>
</template>

<script>
import userApi from "@/api/mine/user";
import { Message } from "element-ui";
import TreeModel from "./components/treeModel.vue";
export default {
  name: "User",
  data() {
    return {
      roleList: [],
      total: 0,
      current: 1,
      pageSize: 3,
      multipleSelection: [],
      username: "",
      input: "",
      dialogVisible: false,
      addUserName: "",
      isShowTree: false,
    };
  },
  components: {
    TreeModel,
  },
  methods: {
    async getRoleList(roleName = "") {
      try {
        let { data } = await userApi.reqRoleList(
          this.current,
          this.pageSize,
          roleName
        );
        data.items.forEach((item) => {
          item.isIpt = false;
        });
        this.roleList = data.items;
        this.total = data.total;
      } catch (error) {
        console.log(error);
      }
    },
    // 修改当前页
    setCurrent(current) {
      console.log(1);
      this.current = current;
    },
    setSize(pageSize) {
      this.pageSize = pageSize;
    },
    handleSelectionChange(val) {
      this.multipleSelection = [...val];
    },
    searchKeyword() {
      if (this.input) this.getRoleList(this.input);
      if (!this.input) {
        this.getRoleList();
      }
    },
    clear() {
      this.input = "";
      this.getUserList();
    },
    // 保存添加的角色
    async addRole() {
      try {
        await userApi.reqAddRole(this.addUserName);
        Message.success("保存成功");
      } catch (error) {
        Message.error(error);
      } finally {
        this.dialogVisible = false;
        this.getRoleList();
      }
    },
    // 批量删除
    async batchDelete() {
      try {
        await this.$alert("确定删除吗", "警告", {
          confirmButtonText: "确定",
          showCancelButton: "取消",
        });
        await Promise.all(
          this.multipleSelection.map(async (item) => {
            await userApi.deleteRole(item.id);
          })
        );
        Message.success("删除成功");
        this.getRoleList();
      } catch (error) {
        console.log(error);
      }
    },
    // 单个删除
    async removeRole(role) {
      try {
        await this.$alert(`确定删除${role.roleName}`, "警告", {
          confirmButtonText: "确定",
          showCancelButton: "取消",
        });
        await userApi.deleteRole(role.id);
        Message.success("删除成功");
        this.getRoleList();
      } catch (error) {
        if (error == "cancel") return;
        Message.error(error);
      }
    },
    // 修改role的name
    editRoleName(role) {
      this.roleName = role.roleName;
      role.isIpt = true;
    },
    // 确认修改
    async saveRoleName(role) {
      try {
        let Newrole = {
          ...role,
          originRoleName: role.roleName,
          roleName: this.roleName,
        };
        await userApi.reqSaveRoleName(Newrole);
        Message.success("修改成功");
      } catch (error) {
        Message.error(error);
      } finally {
        role.isIpt = false;
        this.getRoleList();
      }
    },
    // 取消修改
    cancelRole(role) {
      role.isIpt = false;
    },
    // i
    editAssign(row) {
      this.$refs.treeModel.role = row;
      this.isShowTree = true;
    },
  },
  mounted() {
    this.getRoleList();
    this.$bus.$on("TreeShow", (flag) => {
      this.isShowTree = flag;
    });
  },
  computed: {
    // 监听current和pagesize
    czChange() {
      let { current, pageSize } = this;
      return {
        current,
        pageSize,
      };
    },
  },
  watch: {
    // 监听current和pagesize
    czChange() {
      this.getRoleList(this.username);
    },
  },
};
</script>

<style scoped></style>
